<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item class="breadcrumb_active_item"
            >账号信息</el-breadcrumb-item
          >
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <div class="user_edit_content">
        <!-- 表单 -->
        <el-row>
          <el-col :span="24">
            <el-form
              ref="userEdit"
              :model="submitData"
              label-width="100px"
              :rules="rules"
            >
              <el-form-item label="用户名称" size="small" prop="name">
                <el-col :span="6">
                  <el-input maxlength="20" v-model="submitData.name"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="手机号码" size="small" prop="phone">
                <el-col :span="6">
                  <el-input v-model="submitData.phone" disabled></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="用户简介" size="small" prop="describe">
                <el-col :span="6">
                  <el-input
                    type="textarea"
                    v-model="submitData.describe"
                    :rows="4"
                    class="user_edit_textarea"
                  ></el-input>
                </el-col>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </el-row>
    <div class="user_edit_btn_box">
      <el-button
        type="danger"
        size="mini"
        icon="el-icon-s-claim"
        @click="saveBtn()"
        >保存</el-button
      >
      <el-button
        type="info"
        size="mini"
        icon="el-icon-sort-up"
        @click="backBtn()"
        >返回上一页</el-button
      >
    </div>
  </div>
</template>
<style src="../../assets/css/user/userEdit.css" scoped></style>

<script>
export default {
  name: "UserEdit",
  components: {},
  data() {
    return {
      examineeId: "", // 考生id
      pageTitle: "", // 页面名称
      editKey: false, // 是否编辑
      submitData: {
        name: "",
        phone: "",
        describe: "",
      }, // 提交数据
      rules: {
        name: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
      },
      loadingKey: false,
      loadingText: "",
    };
  },
  created: function () {
    this.getDataFn();
  },
  methods: {
    // 查询考生信息
    getDataFn: function () {
      let that = this;
      let url = "/mobile/personalinfo";
      let data = {};
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.submitData = response.userinfo;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 提交保存
    saveBtn: function () {
      let that = this;
      let url = "/mobile/updateUserInfo";
      let data = {
        name: this.submitData.name,
        describe: this.submitData.describe,
      };
      this.$refs.userEdit.validate((valid) => {
        if (!valid) {
          return false;
        } else {
          that.loadingText = "处理中...";
          that.loadingKey = true;
          this.axios
            .post(url, data)
            .then((response) => {
              that.loadingKey = false;
              if (response.code == 0) {
                that.$message.success("修改成功");
                that.$store.commit("set_loginUserName", that.submitData.name);
                that.getDataFn();
              } else {
                that.$message.error(response.msg);
              }
            })
            .catch(function (error) {
              that.loadingKey = false;
              console.log(error);
            });
        }
      });
    },
    // 返回上一页
    backBtn: function () {
      this.$router.go(-1);
    },
  },
};
</script>
